<template>
  <div style="margin-left: 50px">
    <div class="m-title">{{ $t("BasicInformation") }}</div>
    <div class="m-info">
      <el-row :gutter="10">
        <el-col
          :span="9"
        >{{ $t("outboundOrderLang.warehouseOutDocNo") + " : "
        }}{{ infoData.orderNo }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col
          :span="9"
        >{{ $t("goodsSKULang.sources") + " : "
        }}{{ infoData.source }}</el-col>
        <el-col
          :span="9"
        >{{ $t("outboundOrderLang.orderType") + " : "
        }}{{ infoData.orderVoteType }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col
          :span="9"
        >{{ $t("outboundOrderLang.trackingNo") + " : "
        }}{{ infoData.trackingNo }}</el-col>
        <el-col
          :span="9"
        >{{ $t("materialsLang.packageMaterial") + " : "
        }}{{ infoData.pack }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col
          :span="9"
        >{{ $t("outboundOrderLang.rigDocNo") + " : "
        }}{{ infoData.platformOrderNo }}</el-col>
        <el-col
          :span="9"
        >{{ $t("harvestLang.logisticsProducts") + " : "
        }}{{ infoData.channelName }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col
          :span="9"
        >{{ $t("outboundOrderLang.providerNo") + " : "
        }}{{ infoData.providerTrackingNo }}</el-col>
        <el-col
          :span="9"
        >{{ $t("outboundOrderLang.countryOfDestination") + " : "
        }}{{ infoData.regionName }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col
          :span="9"
        >{{ $t("unitLang.weight") + " : " }}{{ infoData.weight }}</el-col>
        <el-col
          :span="9"
        >{{ $t("harvestLang.providerChannel") + " : "
        }}{{ infoData.providerChannelName }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col
          :span="9"
        >{{ $t("unitLang.size") + " : " }}{{ infoData.size }}</el-col>
        <el-col
          :span="9"
        >{{ $t("warehouseEntryLang.provider") + " : "
        }}{{ infoData.providerName }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col
          :span="9"
        >{{ $t("unitLang.volumeWeight") + " : "
        }}{{ infoData.volumeWeight || $t("unitLang.noBubble") }}</el-col>
        <el-col
          :span="9"
        >{{ $t("unitLang.bubbleCoefficient") + " : " }}
          {{ infoData.bubbleCoefficient || $t("unitLang.noBubble") }}</el-col>
      </el-row>
      <el-row v-if="false" :gutter="10">
        <el-col
          :span="9"
        >{{
          $t("harvestLang.providerChannel") +
            $t("unitLang.volumeWeight") +
            " : "
        }}{{
          infoData.providerVolumeWeight || $t("unitLang.noBubble")
        }}</el-col>
        <el-col
          :span="9"
        >{{
          $t("harvestLang.providerChannel") +
            $t("unitLang.bubbleCoefficient") +
            " : "
        }}{{
          infoData.providerBubbleCoefficient || $t("unitLang.noBubble")
        }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col
          :span="9"
        >{{ $t("unitLang.billingWeight") + " : "
        }}{{ infoData.billingWeight }}</el-col>
        <el-col
          :span="9"
        >{{ $t("outboundOrderLang.channelOwner") + " : "
        }}{{ infoData.channelBusinessOwnerName }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col
          :span="9"
        >{{ $t("goodsSKULang.customer") + " : "
        }}{{ infoData.customerName }}</el-col>
        <el-col
          :span="9"
        >{{ $t("outboundOrderLang.customerService") + " : "
        }}{{ infoData.customerServicePersonName }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col
          :span="9"
        >{{ $t("warehouseEntryLang.managerPerson") + " : "
        }}{{ infoData.handlePersonName }}</el-col>
      </el-row>
    </div>
    <div class="m-title" style="margin-top: 20px">
      {{ $t("outboundOrderLang.recipientInformation") }}
    </div>
    <div class="m-info">
      <el-row :gutter="10">
        <el-col
          :span="9"
        >{{ $t("outboundOrderLang.recipient") + " : "
        }}{{ infoData.receiveName }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col
          :span="9"
        >{{ $t("outboundOrderLang.recipientPhone") + " : "
        }}{{ infoData.receiveTel }}</el-col>
        <el-col
          :span="9"
        >{{ $t("outboundOrderLang.recipientMobilePhone") + " : "
        }}{{ infoData.receiveTelMobile }}</el-col>
        <el-col
          :span="6"
        >{{ $t("outboundOrderLang.recipientEmail") + " : "
        }}{{ infoData.receivePostCode }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col
          :span="9"
        >{{
          $t("outboundOrderLang.recipient") + $t("depotLang.country") + " : "
        }}{{ infoData.receiveCountry }}</el-col>
        <el-col
          :span="9"
        >{{
          $t("outboundOrderLang.recipient") +
            $t("depotLang.province") +
            " : "
        }}{{ infoData.receiveProvince }}</el-col>
        <el-col
          :span="6"
        >{{
          $t("outboundOrderLang.recipient") +
            $t("depotLang.provinceStates") +
            " : "
        }}{{ infoData.receiveCity }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col
          :span="9"
        >{{
          $t("outboundOrderLang.recipient") + $t("depotLang.address") + " : "
        }}{{ infoData.receiveAddr }}</el-col>
      </el-row>
    </div>
    <div class="m-title" style="margin-top: 20px">
      {{ $t("otherInformation") }}
    </div>
    <div style="margin-top: 20px">
      <el-tabs v-model="active" v-layout>
        <el-tab-pane :label="$t('outboundOrderLang.orderProducts')" name="0">
          <el-table v-loading="goodsLoading" :data="goodsData" border>
            <el-table-column
              type="index"
              :label="$t('tableIndex')"
              width="55"
              align="center"
              fixed="left"
            />
            <el-table-column
              :label="$t('goodsSKULang.goodsName')"
              min-width="150"
              align="center"
              prop="goodsName"
            />
            <el-table-column
              :label="$t('goodsSKULang.skuCode')"
              min-width="150"
              align="center"
              prop="goodsSkuCode"
            />
            <el-table-column
              :label="$t('goodsSKULang.customCode')"
              min-width="150"
              align="center"
              prop="customCode"
            />
            <el-table-column
              :label="$t('goodsSKULang.declaredPrice')"
              min-width="150"
              align="center"
              prop="declaredCnyPrice"
            />
            <el-table-column
              :label="$t('number')"
              min-width="150"
              align="center"
              prop="goodsQuantity"
            />
            <el-table-column
              :label="$t('unitLang.weight') + 'KG'"
              min-width="150"
              align="center"
              prop="skuWeight"
            />
            <el-table-column
              :label="$t('unitLang.volume') + 'CM'"
              min-width="150"
              align="center"
              prop="skuVolume"
            />
          </el-table>
        </el-tab-pane>
        <el-tab-pane :label="$t('outboundOrderLang.operationRecord')" name="1">
          <el-table v-loading="logLoading" :data="logData" border>
            <el-table-column
              type="index"
              :label="$t('tableIndex')"
              width="55px"
              align="center"
              fixed="left"
            />
            <el-table-column
              :label="$t('harvestLang.operationNode')"
              min-width="150"
              align="center"
              prop="operationNodeName"
            />
            <el-table-column
              :label="$t('goodsSKULang.operator')"
              min-width="150"
              align="center"
              prop="operationPersonName"
            />
            <el-table-column
              :label="$t('operationDate')"
              min-width="150"
              align="center"
              prop="operationTime"
            />
          </el-table>
        </el-tab-pane>
        <el-tab-pane :label="$t('outboundOrderLang.orderLog')" name="2">
          <el-table v-loading="apiLoading" :data="apiData" border>
            <el-table-column
              type="index"
              :label="$t('tableIndex')"
              width="55px"
              align="center"
              fixed="left"
            />
            <el-table-column
              :label="$t('warehouseEntryLang.operator')"
              min-width="150"
              align="center"
              prop=""
            />
            <el-table-column
              :label="$t('outboundOrderLang.statusBeforeModification')"
              min-width="150"
              align="center"
              prop=""
            />
            <el-table-column
              :label="$t('outboundOrderLang.statusAfterModification')"
              min-width="150"
              align="center"
              prop=""
            />
            <el-table-column
              :label="$t('harvestLang.modification')"
              min-width="150"
              align="center"
              prop=""
            />
            <el-table-column
              :label="$t('harvestLang.modifiedRemarks')"
              min-width="150"
              align="center"
              prop=""
            />
          </el-table>
        </el-tab-pane>
        <el-tab-pane :label="$t('outboundOrderLang.orderApiLog')" name="3">
          <el-table v-loading="apiLoading" :data="apiData" border>
            <el-table-column
              type="index"
              :label="$t('tableIndex')"
              width="55px"
              align="center"
              fixed="left"
            />
            <el-table-column
              :label="$t('warehouseEntryLang.provider')"
              min-width="150"
              align="center"
              prop=""
            />
            <el-table-column
              :label="$t('harvestLang.providerChannel')"
              min-width="150"
              align="center"
              prop=""
            />
            <el-table-column
              :label="$t('statusLang.status')"
              min-width="150"
              align="center"
              prop=""
            />
            <el-table-column
              :label="$t('outboundOrderLang.failureReason')"
              min-width="150"
              align="center"
              prop=""
            />
            <el-table-column
              :label="$t('outboundOrderLang.pusher')"
              min-width="150"
              align="center"
              prop=""
            />
            <el-table-column
              :label="$t('pushDate')"
              min-width="150"
              align="center"
              prop="pushDate"
            />
          </el-table>
        </el-tab-pane>
        <el-tab-pane
          v-if="false"
          :label="$t('outboundOrderLang.providerChannelBilling')"
          name="4"
        >
          <el-table
            v-loading="providerFeeLoading"
            :data="providerFeeData"
            border
            :row-key="(row) => row.feeTypeName"
            :expand-row-keys="[$t('outboundOrderLang.freight')]"
            show-summary
          >
            <el-table-column
              type="index"
              :label="$t('tableIndex')"
              width="55px"
              align="center"
            />
            <el-table-column type="expand">
              <template slot-scope="scope">
                <div
                  v-if="scope.row.content"
                  style="line-height: 30px; margin-left: 20px"
                >
                  <div>
                    {{ $t("unitLang.billingWeight") + " : "
                    }}{{ scope.row.content.weight }}
                  </div>
                  <div>
                    {{ $t("outboundOrderLang.priceListId") + " : "
                    }}{{ scope.row.content.priceId }}
                  </div>
                  <div style="display: flex">
                    <div>{{ $t("outboundOrderLang.freightPrice") }}</div>
                    <div>
                      <el-table :data="[scope.row.content.feeRule]" border>
                        <el-table-column
                          :label="$t('unitLang.weightStart') + '(KG)'"
                          prop="weightStart"
                          width="120"
                        />
                        <el-table-column
                          :label="$t('unitLang.weightStart') + '(KG)<='"
                          prop="weightEnd"
                          width="120"
                        />
                        <el-table-column
                          :label="$t('unitLang.billingType')"
                          prop="chargeType"
                          width="120"
                        >
                          <template v-slot="{ row }">
                            {{
                              $t(
                                "statusLang." +
                                  getTitleByValue(
                                    priceChargeTypeOptions,
                                    row.chargeType
                                  )
                              )
                            }}
                          </template>
                        </el-table-column>
                        <el-table-column
                          :label="$t('unitLang.billingWeightUnit') + '(KG)'"
                          prop="chargeWeightUnit"
                          width="150"
                        />
                        <el-table-column
                          :label="$t('unitLang.price') + '(CNY)'"
                          prop="price"
                          width="120"
                        />
                        <el-table-column
                          :label="$t('unitLang.continuedWeight') + '(KG)'"
                          prop="continuationWeight"
                          width="120"
                        />
                        <el-table-column
                          :label="
                            $t('unitLang.unitPriceOfRenewalWeight') + '(CNY)'
                          "
                          prop="continuationPrice"
                          width="120"
                        />
                        <el-table-column
                          :label="$t('unitLang.registrationFee')"
                          prop="registrationFee"
                          width="120"
                        />
                      </el-table>
                    </div>
                  </div>
                  <div>
                    {{ $t("outboundOrderLang.billingProcess") + " : "
                    }}{{ scope.row.content.billingProcess }}
                  </div>
                </div>
                <div v-else style="text-align: center">
                  {{ $t("noDetails") }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('unitLang.expenseType')"
              min-width="150"
              align="center"
              prop="feeTypeName"
            />
            <el-table-column
              :label="$t('unitLang.cost')"
              min-width="150"
              align="center"
              prop="feeAmount"
            />
          </el-table>
        </el-tab-pane>
        <el-tab-pane :label="$t('unownedGoodsLang.pic')" name="5">
          <div class="image-list">
            <el-image
              v-for="(image, index) in images"
              :key="index"
              :src="image"
              style="margin: 5px; width: 100px; height: 100px"
              :preview-src-list="images"
              fit="cover"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getTitleByValue, getDictOptionList } from '@/utils/dictUtils'
import { priceChargeTypeDict } from '@/utils/dictData'

export default {
  props: {
    infoData: {
      type: Object,
      default: undefined
    },
    goodsData: {
      type: Array,
      default: undefined
    },
    logData: {
      type: Array,
      default: undefined
    },
    apiData: {
      type: Array,
      default: undefined
    },
    customerFeeData: {
      type: Array,
      default: undefined
    },
    providerFeeData: {
      type: Array,
      default: undefined
    },
    images: {
      type: Array,
      default: undefined
    }
  },
  data() {
    return {
      active: '0',
      goodsLoading: false,
      logLoading: false,
      apiLoading: false,
      customerFeeLoading: false,
      providerFeeLoading: false,
      priceChargeTypeOptions: getDictOptionList(priceChargeTypeDict)
    }
  },
  methods: { getTitleByValue }
}
</script>

<style scoped>
.m-title {
  font-weight: Bold;
}

.m-info {
  margin-top: 20px;
  margin-left: 50px;
}

.m-info >>> .el-col {
  padding: 15px 0;
}
</style>
